<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const isopen = ref(false)
const avatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
const router = useRouter()
const logout = () => {
  sessionStorage.removeItem('Authorization')
  localStorage.removeItem('rememberMe')
  localStorage.removeItem('rememberedAccount')
  localStorage.removeItem('rememberedPassword')
  ElMessage.error('你已退出登录')
  router.push('/')
}
</script>

<template>
  <el-container>
    <el-aside :width="isopen ? '60px' : '220px'">
      <h1>Px WMS</h1>
      <el-menu :collapse="isopen" :collapse-transition="false" router background-color="#485460" text-color="#fff" active-text-color="#ffd04b" default-active="/home">

        <el-menu-item index="/home" class="loading">
          <el-icon ><ChromeFilled /></el-icon>
          <template #title>控制面板</template>
        </el-menu-item>

        <el-menu-item index="/AIhelp" class="loading">
          <el-icon><Mic /></el-icon>
          <template #title>AI助手</template>
        </el-menu-item>

        <el-menu-item-group title="网站">
          <el-sub-menu index=1-1>
            <template #title>
              <el-icon><Monitor /></el-icon>
              <span>网站管理</span>
            </template>
            <el-menu-item index="/website">
              网站列表
            </el-menu-item>
            <el-menu-item index="/website/address">
              公司地址
            </el-menu-item>
            <el-menu-item index="/website/swiper">
              网站轮播图
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index=1-2>
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>内容管理</span>
            </template>
            <el-menu-item index="/content">
             内容审核
            </el-menu-item>
          </el-sub-menu>

        </el-menu-item-group>

        <el-menu-item-group title="公司">
          <el-sub-menu index=2-1>
            <template #title>
              <el-icon><PieChart /></el-icon>
              <span>石材管理</span>
            </template>
            <el-menu-item index="/stone/square/">
              方料进度
            </el-menu-item>
            <el-menu-item index="/stone/build/">
              开单系统
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index=2-2>
            <template #title>
              <el-icon><Files /></el-icon>
              <span>码单管理</span>
            </template>
            <el-menu-item index="/code/list/">
              码单查询
            </el-menu-item>
          </el-sub-menu>
        </el-menu-item-group>

        <el-menu-item-group title="设计">
          <el-sub-menu index=3-1>
            <template #title>
              <el-icon><Scissor /></el-icon>
              <span>美术管理</span>
            </template>
            <el-menu-item index="/picture">
              图片处理
            </el-menu-item>
          </el-sub-menu>
        </el-menu-item-group>

        <el-menu-item-group title="设置" class="loading">
          <el-sub-menu index=4-1>
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/user/power">
              用户权限
            </el-menu-item>
            <el-sub-menu index=4-1-1>
              <template #title>日志管理</template>
              <el-menu-item index="/loginlog">登入日志</el-menu-item>
              <el-menu-item index="/Ctrllog">操作日志</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu-item-group>
      </el-menu>

    </el-aside>
    <el-container>

      <el-header>
        <el-icon @click="isopen = !isopen">
          <Fold v-if="!isopen" />
          <Expand v-else="isopen" />
        </el-icon>

        <div class="userinfo">
          <el-dropdown size="small" placement="bottom-end">
            <el-button><el-avatar :src="avatar" /><el-icon>
                <CaretBottom />
              </el-icon></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

      </el-header>

      <el-main><RouterView /></el-main>

    </el-container>
  </el-container>
</template>

<style scoped>
.el-aside h1 {
  height: 40px;
  margin: 0;
  padding: 10px 0;
  text-align: center;
  line-height: 40px;
  background: linear-gradient(135deg, #bdc3c7, #2c3e50);
  color: #fff;
}
.el-menu-item:hover .el-icon,
.el-sub-menu:hover .el-icon{
  animation: rotating 2s linear infinite;
}
.is-active .el-icon{
  animation: rotating 2s linear infinite;
}
.el-menu-item-group__title{
  color: #fff!important;
}
.el-container {
  height: 100%;
}

.el-aside {
  display: flex;
  flex-direction: column;
  transition: all .5s ease-out;
  background-color: #485460;
  overflow: hidden;
}

.el-menu {
  flex-grow: 1;
  border: none;
  height: 100%;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #eaeaea;
  font-size: 24px;
}
.el-header .el-icon {
  cursor: pointer;
}

.el-header .userinfo {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-header .userinfo .el-icon {
  font-size: 14px
}

.el-dropdown>.el-button {
  border: none;
  outline: none;
}

.el-dropdown>.el-button:hover {
  background-color: transparent;
}

.el-popper.is-light {
  background: transparent;
  border: none;
}

.el-main {
  width: 100%;
  padding: 0;
  overflow-x: hidden
}
</style>